// import { useCallback } from "react";
import { Handle, Position } from "@xyflow/react";

// const handleStyle = { left: 1 };

export default function TextUpdaterNode({ data, isConnectable }) {
  console.log(data);

  // console.log(props);
  // const onChange = useCallback((evt) => {
  //   console.log(evt.target.value);
  // }, []);

  return (
    <div className="text-updater-node" style={{ width: "100px" }}>
      {/* <Handle
        type="target"
        position={Position.Top}
        isConnectable={isConnectable}
      />
      <div>
        <label htmlFor="text">Text:</label>
        <input id="text" name="text" onChange={onChange} />
        <input type="range" min={0} max={100} className="nodrag" />
      </div> */}
      {/* <Handle
        type="source"
        position={Position.Bottom}
        id="a"
        style={handleStyle}
        isConnectable={isConnectable}
      /> */}
      {/* <div>
      </div> */}

      <Handle
        id="b"
        type="source"
        position={Position.Bottom}
        isConnectable={isConnectable}
        className="hh"
      ></Handle>
      <div> {data.value}</div>
    </div>
  );
}
